<template>
  <div class="e-table">
    <div class="header-title">选择零星采购计划</div>
    <el-row class="row">
      <el-col class="wrapper" :span="13">
        <div class="title">数据</div>
        <div class="search">
          <el-input
            placeholder="输入项目编号"
            size="small"
            style="width: 200px"
          >
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <span style="margin-left: 10px; color: red"
            >双击行选择或取消选择</span
          >
        </div>
        <div>
          <el-table
            ref="initTable"
            border
            :data="tableData"
            :row-style="rowClass"
            @row-dblclick="checkRow"
            @select="changeRow"
            v-loading="loading"
            @select-all="changeRow"
          >
            <el-table-column type="selection" v-if="multiple"></el-table-column>
            <el-table-column
              align="center"
              label="计划编号"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="物资名称"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="规格"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="材质"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="单位"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="计划数量"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="剩余未收料数量"
              prop="a"
              width="120"
            ></el-table-column>
          </el-table>
          <ComPagination
            :total="pagination.total"
            @update:currentPage="currentChange"
            :currentPage="pagination.page"
            @update:pageSize="updatePageSize"
          />
        </div>
      </el-col>
      <el-col class="wrapper" :span="10">
        <div class="title">已选择</div>
        <el-table border :data="tableData1" @row-dblclick="cancelRow">
         <el-table-column
              align="center"
              label="物资名称"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="规格"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="材质"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="单位"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="计划数量"
              prop="a"
            ></el-table-column>
            <el-table-column
              align="center"
              label="剩余未收料数量"
              prop="a"

            ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="bottom">
      <div>
        <el-button class="btn-blue" size="mini" @click="confirm"
          >确定</el-button
        >
        <el-button size="mini" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import request from '@/api/equip/equipPlan.js'
import ComPagination from '@/components/pagination/pagination.vue'
import { mapState } from 'vuex'
export default {
    // props: {
    //     multiple: {  //是否支持多选，true为多选false为单选
    //         type: Boolean,
    //         default: true,
    //     }
    // },
    data () {
        return {
            pagination: {
                limit: 10,
                page: 1,
                query: '',
                orgId: '',
            },
            loading: false,
            tableData: [], //左边table的数据，虚从接口获取
            tableData1: [], //右边table选择的数据
        }
    },
    components: {
        ComPagination,
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
        }),
    },
    mounted () {},

    methods: {
        getList () {
            // this.loading = true
            this.pagination.orgId = this.userInfo.orgInfo.orgId
            // this.$Ajax
            //     .httpPost({
            //         url: '/contract/externalFrontEnd/specificContract',
            //         params: {
            //             'orgId': this.pagination.orgId,
            //         }
            //     })
            //     .then(res=>{
            //         console.log('>>>>>', res)
            //         this.tableData = res
            //         this.$nextTick(()=>{
            //             let initTable =  this.$refs.initTable
            //             initTable.clearSelection()
            //             this.tableData1.forEach(item=>{
            //                 this.tableData.forEach(row=>{
            //                     if(row.ctSubContractId === item.ctSubContractId) {
            //                         console.log('row', row)
            //                         initTable.toggleRowSelection(row, true)
            //                     }
            //                 })
            //             })
            //         })

            //         this.loading = false
            //     })
        },
        currentChange (page) {
            this.pagination.page = page
            this.getList()
        },
        //左边表格双击选中
        checkRow (row) {
            if (this.multiple) {
                JSON.stringify(this.tableData1).includes(JSON.stringify(row))
                    ? ''
                    : this.tableData1.push(row)
                this.tableData1.forEach(item => {
                    this.$refs.initTable.toggleRowSelection(item, true)
                })
            } else {
                this.tableData1 = [row]
            }
        },
        //对所选行进行高亮显示
        rowClass ({ row }) {
            let stylejson = {}
            this.tableData1.forEach(item => {
                if (item.ctSubContractId === row.ctSubContractId) {
                    //暂时用equipmentId字段进行标识，根据实际返回字段换成其他的
                    stylejson.backgroundColor = '#ecf5ff'
                }
            })
            return stylejson
        },
        //左边表格选框选中
        changeRow (selection) {
            if (this.multiple) {
                selection.forEach(item => {
                    let arr = this.tableData1.find(
                        x => x.ctSubContractId === item.ctSubContractId
                    ) //判断在右边表格里是否有左边已选择的数据
                    if (!arr) {
                        this.tableData1.push(item) //没有则添加进去
                    }
                })
                //下面是判断左边表格取消操作，常规的赋值会让翻页后数据出现问题，无法保留其他页面的选择
                this.tableData.forEach(item => {
                    let obj = selection.find(
                        x => x.ctSubContractId === item.ctSubContractId
                    ) //查找到取消的那一条
                    if (!obj) {
                        let index = this.tableData1.findIndex(
                            x => x.ctSubContractId === item.ctSubContractId
                        ) //看取消的那一条是否在右边表格里
                        if (index !== -1) {
                            this.tableData1.splice(index, 1) //在的话就删除右边表格的这一条
                        }
                    }
                })
            }
        },
        //取消选择
        cancelRow (row) {
            this.tableData1.forEach((item, index) => {
                if (row.ctSubContractId === item.ctSubContractId) {
                    this.tableData1.splice(index, 1)
                    this.$refs.initTable.toggleRowSelection(item, false)
                } else {
                    this.$refs.initTable.toggleRowSelection(item, true)
                }
            })
        },
        cancel () {
            // this.$emit('cancel')
        },
        confirm () {
            // this.$emit('confirm', this.tableData1)
            // this.tableData1.forEach(item => {
            //     console.log(item.ctSubContractId)
            // })
        },
    },
}
</script>

<style lang="scss" scoped>
.e-table {
  background-color: #fff;
  padding: 20px;
  .header-title {
    font-size: 18px;
    margin-bottom: 30px;
    color: #585252;
  }
  .bottom {
    margin-top: 20px;
    text-align: right;
  }
  .row {
    display: flex;
    min-height: 550px;
    .wrapper {
      border: 1px solid #ebeef5;
      padding: 20px;
      border-radius: 2px;
      margin: 5px;
      position: relative;
      height: auto;
      .search {
        margin: 10px;
        .el-input__icon {
          cursor: pointer;
        }
      }
      .title {
        position: absolute;
        top: -10px;
        left: 10px;
        padding: 0 5px;
        background: #fff;
      }
    }
  }
}
</style>